<template>
  <div class="float-quick-menu" :style="{ top: top + 'px' }">
    <div class="menu-item app-download"><span>APP下载</span></div>
    <div class="menu-item quick-register"><span>快速报名</span></div>
    <div class="menu-item phone-cousultation"><span>电话咨询</span></div>
  </div>
</template>

<script setup>
onMounted(() => {
  window.addEventListener('scroll', handleScroll, true);
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
})

const top = ref(627)
function handleScroll(e) {
  const layoutScrollbarFlag = e.target.classList.contains('layout-scrollbar-wrapper')
  const scrollTop = e.target.scrollTop
  if (layoutScrollbarFlag) {
    if (scrollTop > 0 && scrollTop <= 540) {
      top.value = (627 - scrollTop)
    }
    if (scrollTop == 0) {
      top.value = 627
    }
  }
}

</script>
<style scoped lang="scss">
.float-quick-menu {
  width: 98px;
  position: fixed;
  top: calc(50px + 37px);
  right: 0;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  z-index: 10;

  .menu-item {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 8px;
    border-radius: 8px;
    // background: linear-gradient(88deg, #515FFE 0%, #6095FB 100%);
    // background: linear-gradient(88deg, #1151CB 0%, #6095FB 100%);
    // background: linear-gradient(88deg, #333DAA 0%, #6095FB 100%);

    $menuItemBgColor: linear-gradient(88deg, #515FFE 0%, #6095FB 100%), linear-gradient(88deg, #1151CB 0%, #6095FB 100%), linear-gradient(88deg, #333DAA 0%, #6095FB 100%);

    @each $c in $menuItemBgColor {
      $i: index($menuItemBgColor, $c); // 获取 $c 在数组中的索引，并赋值给 $i 赋值用冒号，不是等号~！

      &:nth-child(#{$i}) {
        // 经典的地方来了，SCSS 循环是从 1 开始，不是 0 哦~
        background: $c; // 背景色

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>